<template>
    <div class="xtx-city" ref="currentViewDom">
        <div class="select" @click="toggleDialog" :class="{'active':show}">
            <span class="placeholder">{{fullLocation}}</span>
            <span class="value"></span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-if="show">
            <div v-if="loading" class="loading"></div>
            <template v-else>
                <span class="ellipsis" @click="changeAddress(item)" v-for="item in currList" :key="item.code">{{item.name}}</span>
            </template>
        </div>
    </div>
</template>

<script>
    import { onClickOutside } from '@vueuse/core'
    import { computed, reactive, ref } from 'vue'
    import axios from 'axios'
    export default {
        name: 'XtxCity',
        props: {
            fullLocation: {
                type: String,
                defalut: ''
            }
        },
        setup(props, { emit }) {
            const show = ref(false)
            const loading = ref(false)
            const cityData = ref([])
            // 打开地址弹窗
            const openDialog = () => {
                show.value = true
                loading.value = true
                getCityData().then(data => {
                    cityData.value = data
                    loading.value = false
                })
                for (let key in addressInfo) {
                    addressInfo[key] = ''
                }
            }
            // 关闭地址弹窗
            const closeDialog = () => {
                show.value = false
            }
            const toggleDialog = () => {
                show.value ? closeDialog() : openDialog()
            }
            // 点击 目标元素外 任意地方，关闭弹窗
            const currentViewDom = ref(null)
            onClickOutside(currentViewDom, () => {
                closeDialog()
            })

            // 实现计算属性：获取当前显示的地区数组
            const currList = computed(() => {
                // 默认: 省份
                let newList = cityData.value
                // 城市
                if (addressInfo.provinceCode) {
                    newList = newList.find(p => p.code === addressInfo.provinceCode).areaList
                }
                // 城市
                if (addressInfo.cityCode) {
                    newList = newList.find(p => p.code === addressInfo.cityCode).areaList
                }
                return newList
            })
            // 地址信息
            const addressInfo = reactive({
                provinceCode: '',
                provinceName: '',
                cityCode: '',
                cityName: '',
                countyCode: '',
                countyName: '',
                fullLocation: ''
            })
            // 选择地址
            const changeAddress = (item) => {
                switch (item.level) {
                    case 0:
                        addressInfo.provinceCode = item.code
                        addressInfo.provinceName = item.name
                        break;
                    case 1:
                        addressInfo.cityCode = item.code
                        addressInfo.cityName = item.name
                        break;
                    case 2:
                        addressInfo.countyCode = item.code
                        addressInfo.countyName = item.name
                        addressInfo.fullLocation = `${addressInfo.provinceName } ${addressInfo.cityName } ${addressInfo.countyName }`
                        closeDialog()
                        emit('sendLastAddress', addressInfo)
                        break;
                }

            }
            return {
                show,
                loading,
                currList,
                toggleDialog,
                currentViewDom,
                changeAddress
            }
        }
    }

    // 获取全国省市区数据 阿里提供
    const getCityData = () => {
        // 这个位置可能有异常操作，封装成promise
        return new Promise((resolve, reject) => {
            if (window.cityData) {
                // 有缓存
                resolve(window.cityData)
            } else {
                // 无缓存
                const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
                axios.get(url).then(res => {
                    window.cityData = res.data
                    resolve(window.cityData)
                })
            }
        })
    }
</script>

<style scoped lang="less">
    .xtx-city {
        display: inline-block;
        position: relative;
        z-index: 400;

        .select {
            border: 1px solid #e4e4e4;
            height: 30px;
            padding: 0 5px;
            line-height: 28px;
            cursor: pointer;

            &.active {
                background: #fff;
            }

            .placeholder {
                color: #999;
            }

            .value {
                color: #666;
                font-size: 12px;
            }

            i {
                font-size: 12px;
                margin-left: 5px;
            }
        }

        .option {
            width: 542px;
            border: 1px solid #e4e4e4;
            position: absolute;
            left: 0;
            top: 29px;
            background: #fff;
            min-height: 30px;
            line-height: 30px;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;

            >span {
                width: 130px;
                text-align: center;
                cursor: pointer;
                border-radius: 4px;
                padding: 0 3px;

                &:hover {
                    background: #f5f5f5;
                }
            }

            .loading {
                height: 290px;
                width: 100%;
                background: url(../../assets/images/loading.gif) no-repeat center;
            }
        }
    }
</style>